<template>
  <validate-form @form-submit="onFormsubmit">
    <div class="mb-3">
        <label for="exampleInputEmail0" class="form-label">邮箱地址:</label>
        <validate-input ref="inputRef" :rules="emailRules" v-model="emailValue" id="exampleInputEmail0" type="text" placeholder="请输入邮箱地址"></validate-input>
    </div>
  
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">密码</label>
     <validate-input :rules="passwodrRules" id="exampleInputEmail1" v-model="passwordValue" type="password" placeholder="请输入密码"></validate-input>
  </div>

  <!-- <template v-slot:submit>
      <span class="btn btn-danger">submit</span>
  </template> -->

  <!-- 具名插槽的缩写 -->
  <template #submit>
      <span class="btn btn-danger">submit</span>
  </template>
  
</validate-form>
</template>

<script lang='ts'>
/* 使用store 触发store里面的函数 */
import {useStore} from 'vuex'

import {defineComponent,reactive,ref,computed} from 'vue'
import {useRouter} from 'vue-router'
import validateInput,{RuleProps} from '../validateInput/validateInput.vue'
import ValidateForm from '../ValidateForm/ValidateForm.vue'
export default defineComponent({
    components:{
        validateInput,
        ValidateForm
    },
    setup() {
        const emailValue = ref('123@qq.com')
        const passwordValue = ref('123456')
        const inputRef = ref<any>('')
        const emailRules:RuleProps = [
            {type: 'required',message: '邮箱地址不能为空！！！'},
            {type: 'email',message: '请输入正确的邮箱！！！'}
        ]
        const passwodrRules:RuleProps = [
            {type: 'required',message: '请输入密码！！！'},
        ]
        const emailRef = reactive({
            val: '',
            error: false,
            message: ''
        })

        const router = useRouter()
        const store = useStore()

        const onFormsubmit = (result: boolean)=> {
            console.log('提交数据：',result)
            if (result) {
                store.commit('login')
                router.push('/')
            }
            // console.log('inputRef',inputRef.value.validateInput());
            
        }
       
        return {
            emailRef,
            emailRules,
            passwodrRules,
            emailValue,
            passwordValue,
            onFormsubmit,
            inputRef
        }
    }
})
</script>

<style>

</style>